/**
 * Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
 * All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are NOT permitted except as agreed by
 * iAuto (Shanghai) Co., Ltd.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 */

import { useRequest } from 'ahooks';
import { Col, Descriptions, Image, Row, Select, message, Button } from 'antd';
import IAutoDetail from '@/components/soa/IAutoDetail';
import React, { useState, useEffect, useMemo } from 'react';
import styles from './detail.less';
import { sceneAuditDetail, scenesRecord, scenesRecordEdit } from '@/services/soa/sceneAudit';
import { ICategoryItem } from '@/types/sceneAudit';
import { getDateMinute, getDateTime } from '@/utils/soa/utils';
import { router } from 'umi';

// TODO: 类型
const Index = ({ location }: any) => {
  const { query } = location;
  const [cateVal, setCateVal] = useState('');
  const [cateoption, setcateoption] = useState('');
  // const [selectValue,setSelectValue] = useState('')
  // 请求回来的参数
  const { data, loading: requestLoading } = useRequest(sceneAuditDetail, {
    defaultParams: [query?.sceneRecordUuid],
    onSuccess: () => {
      // setSelectValue(data?.data?.categoryName||"")
      setcateoption(data?.data?.categoryName || '');
      setCateVal(data?.data?.categoryUuid || '');
    },
  });
  const getType = useRequest(scenesRecord, {
    manual: true,
  });

  useEffect(() => {
    const seriesCode = data?.data?.seriesCode;
    if (seriesCode) {
      getType.run({
        seriesCode,
      });
    }
  }, [data]);

  const getTypeChange = useRequest(scenesRecordEdit, {
    manual: true,
    onSuccess: res => {
      if (res?.statusCode == '0') {
        message.success('修改成功');
        router.push('/soaManage/scene/audit');
      }
    },
  });
  const typeChange = (val: string, option: any) => {
    // getTypeChange.run(
    //   {
    //     categoryName: option.children,
    //     categoryUuid: val,
    //   },
    //   query?.sceneRecordUuid,
    // );
    setCateVal(val);
    setcateoption(option.children);
    // setSelectValue(val)
    // setSelectUuid()
  };
  const onSave = () => {
    getTypeChange.run(
      {
        categoryName: cateoption,
        categoryUuid: cateVal,
      },
      query?.sceneRecordUuid,
    );
  };

  const categoryList = useMemo(() => (getType?.data?.data ?? []).filter(item => item.name !== '用户共创'), [getType])

  return (
    <IAutoDetail className={styles.main} title={'查看详情'} loading={requestLoading}>
      <Row>
        <Col span={24} className={styles.description}>
          <Descriptions column={1} contentStyle={{ whiteSpace: 'normal' }}>
            <Descriptions.Item label={'版本号'}>{data?.data?.version}</Descriptions.Item>
            <Descriptions.Item label={'场景名'}>{data?.data?.name}</Descriptions.Item>
            <Descriptions.Item label={'场景简介'} className={styles.description}>
              {data?.data?.description}
            </Descriptions.Item>
            <Descriptions.Item label={'品牌'}>{data?.data?.brandName}</Descriptions.Item>
            <Descriptions.Item label={'车系'}>{data?.data?.seriesName}</Descriptions.Item>
            <Descriptions.Item label={'车型'}>{data?.data?.modelName}</Descriptions.Item>
            <Descriptions.Item label={'场景分类'}>
              {query?.name ? (
                <Select
                  placeholder={'请选择'}
                  style={{ width: 200, marginTop: -2 }}
                  onChange={typeChange}
                  value={cateoption}
                >
                  {categoryList?.map((item: ICategoryItem, index: number) => (
                    <Select.Option key={index} value={item?.uuid}>
                      {item?.name}
                    </Select.Option>
                  ))}
                </Select>
              ) : (
                <div>{data?.data?.categoryName}</div>
              )}
            </Descriptions.Item>
            <Descriptions.Item label={'是否官方场景'}>
              {data?.data?.officialScene == 0 ? '否' : '是'}
            </Descriptions.Item>
            <Descriptions.Item label={'手机端可执行'}>
              {data?.data?.executedOnPhone == 0 ? '否' : '是'}
            </Descriptions.Item>
            {data?.data?.haveStartTrigger === 1 && (
              <Descriptions.Item label={'车机端二次确认'}>
                {data?.data?.doubleCheckOnVehicle == 0 ? '否' : '是'}
              </Descriptions.Item>
            )}
            <Descriptions.Item label={'场景图标'}>
              <Image src={data?.data?.iconUrl} className={styles.icon} preview={false} />
            </Descriptions.Item>
            <Descriptions.Item label={'场景背景'}>
              <Image
                src={data?.data?.backgroundPicUrl}
                className={styles.background}
                preview={false}
              />
            </Descriptions.Item>
            <Descriptions.Item>发布者信息</Descriptions.Item>
            <Descriptions.Item label={'申请时间'}>
              {getDateTime(data?.data?.applyTime)}
            </Descriptions.Item>
            <Descriptions.Item label={'发布者昵称'}>{data?.data?.developerName}</Descriptions.Item>
            {data?.data?.developerId === 'undefined' ? (
              <Descriptions.Item label={'发布者ID'}>{data?.data?.vin}</Descriptions.Item>
            ) : (
              <Descriptions.Item label={'发布者ID'}>{data?.data?.developerId}</Descriptions.Item>
            )}
            {data?.data?.officialScene === 1 && (
              <Descriptions.Item label={'发布类型'}>
                {data?.data?.releaseType == 0 ? '定时发布' : '立即发布'}
              </Descriptions.Item>
            )}
            {data?.data?.officialScene === 1 && data?.data?.releaseType == 0 && (
              <Descriptions.Item label={'期望发布时间'}>
                {getDateMinute(data?.data?.cronReleaseTime)}
              </Descriptions.Item>
            )}
          </Descriptions>
        </Col>
      </Row>

      {query?.name && (
        <Row style={{ marginTop: 5 }}>
          <Col flex={'auto'}>
            <Button
              style={{ marginLeft: 30 }}
              onClick={() => router.push('/soaManage/scene/audit')}
            >
              取消
            </Button>
            <Button type={'primary'} onClick={onSave} style={{ marginLeft: 20 }}>
              保存
            </Button>
          </Col>
        </Row>
      )}
    </IAutoDetail>
  );
};

export default Index;
